<template>
  <!-- 乐谱详情区 -->
  <section
    class="pt-24 md:pt-32 pb-12 md:pb-20 bg-gray-50 from-primary/5 to-white"
  >
    <!-- 返回按钮 -->
    <div class="container mx-auto px-4 mb-6">
      <button
        class="flex items-center text-neutral-600 hover:bg-primary/90 text-white bg-primary py-2 px-4 rounded-lg transition-all shadow-lg shadow-primary/20"
        @click="$router.back()"
      >
        <i class="fa fa-arrow-left mr-2"></i>
        返回
      </button>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
      <!-- 左侧：乐谱预览 -->
      <div
        class="lg:col-span-2 bg-white rounded-xl shadow-lg overflow-hidden hover-scale"
      >
        <div class="bg-neutral-200 p-6 flex justify-center">
          <div
            class="max-w-3xl w-full aspect-[3/4] bg-white overflow-hidden rounded-lg"
          >
            <!-- 乐谱预览图 -->
            <!-- <img
              src="https://picsum.photos/800/1000?random=1"
              alt="贝多芬月光奏鸣曲乐谱预览"
              class="w-full h-full object-contain p-4"
            /> -->
          </div>
        </div>
      </div>

      <!-- 右侧：乐谱信息 -->
      <div class="lg:col-span-1 space-y-6">
        <!-- 乐谱基本信息 -->
        <div class="bg-white rounded-xl shadow-lg p-6">
          <h2 class="text-2xl font-bold text-neutral-700 mb-2">月光奏鸣曲</h2>
          <p class="text-neutral-500 mb-4">路德维希·凡·贝多芬</p>

          <div class="flex items-center mb-6">
            <div class="flex text-accent">
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star-half-o"></i>
            </div>
            <span class="ml-2 text-neutral-500">4.8 (120 评价)</span>
          </div>

          <div class="grid grid-cols-2 gap-4 mb-6">
            <div>
              <p class="text-neutral-500 text-sm mb-1">难度</p>
              <div class="flex items-center">
                <div class="w-full bg-neutral-200 rounded-full h-2.5">
                  <div
                    class="bg-primary h-2.5 rounded-full"
                    style="width: 75%"
                  ></div>
                </div>
                <span class="ml-2 text-sm font-medium">中级</span>
              </div>
            </div>

            <div>
              <p class="text-neutral-500 text-sm mb-1">页数</p>
              <p class="font-medium">24 页</p>
            </div>

            <div>
              <p class="text-neutral-500 text-sm mb-1">调号</p>
              <p class="font-medium">C♯ 小调</p>
            </div>

            <div>
              <p class="text-neutral-500 text-sm mb-1">乐器</p>
              <p class="font-medium">钢琴</p>
            </div>
          </div>

          <div class="mb-6">
            <p class="text-neutral-500 text-sm mb-1">发布日期</p>
            <p class="font-medium">2023-06-15</p>
          </div>

          <div class="flex flex-col space-y-3">
            <button
              class="bg-primary hover:bg-primary/90 text-white py-3 px-6 rounded-lg font-medium flex items-center justify-center transition-all shadow-lg shadow-primary/20"
            >
              <i class="fa fa-download mr-2"></i>
              下载乐谱
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts" setup></script>

<style></style>
